<template>
	<view class="container">
		<!-- 通知设置 -->
		<view class="settings-section">
			<view class="section-header">
				<text class="section-title">通知设置</text>
			</view>
			<view class="settings-card">
				<view class="setting-item">
					<view class="setting-info">
						<text class="setting-label">启用通知</text>
						<text class="setting-desc">开启日程提醒通知</text>
					</view>
					<switch 
						:checked="notifications.enabled"
						@change="updateNotification('enabled', $event.detail.value)"
						color="#3B82F6"
					/>
				</view>
				
				<view class="setting-item" v-if="notifications.enabled" @click="showScheduleReminderSelector">
					<view class="setting-info">
						<text class="setting-label">日程提醒时间</text>
						<text class="setting-desc">日程截止前{{ notifications.scheduleReminderMinutes || 30 }}分钟提醒</text>
					</view>
					<uni-icons type="arrowright" size="16" color="#6B7280" />
				</view>
			</view>
		</view>

		<!-- 默认设置 -->
		<view class="settings-section">
			<view class="section-header">
				<text class="section-title">默认设置</text>
			</view>
			<view class="settings-card">
				<view class="setting-item" @click="showPrioritySelector">
					<view class="setting-info">
						<text class="setting-label">默认优先级</text>
						<text class="setting-desc">{{ getPriorityText(defaults.priority) }}</text>
					</view>
					<uni-icons type="arrowright" size="16" color="#6B7280" />
				</view>
				
				<view class="setting-item" @click="manageTags">
					<view class="setting-info">
						<text class="setting-label">管理标签</text>
						<text class="setting-desc">添加或删除自定义标签</text>
					</view>
					<uni-icons type="arrowright" size="16" color="#6B7280" />
				</view>
			</view>
		</view>

		<!-- 数据管理功能暂时隐藏 -->
		<!-- <view class="settings-section">
			<view class="section-header">
				<text class="section-title">数据管理</text>
			</view>
			<view class="settings-card">
				<view class="setting-item">
					<view class="setting-info">
						<text class="setting-label">自动备份</text>
						<text class="setting-desc">定期自动备份日程数据</text>
					</view>
					<switch 
						:checked="data.autoBackup"
						@change="updateData('autoBackup', $event.detail.value)"
						color="#3B82F6"
					/>
				</view>
				
				<view class="setting-item" @click="backupData">
					<view class="setting-info">
						<text class="setting-label">立即备份</text>
						<text class="setting-desc">{{ getLastBackupText() }}</text>
					</view>
					<uni-icons type="cloud-upload" size="16" color="#3B82F6" />
				</view>
				
				<view class="setting-item" @click="restoreData">
					<view class="setting-info">
						<text class="setting-label">恢复数据</text>
						<text class="setting-desc">从备份中恢复日程数据</text>
					</view>
					<uni-icons type="cloud-download" size="16" color="#3B82F6" />
				</view>
				
				<view class="setting-item" @click="clearAllData">
					<view class="setting-info">
						<text class="setting-label">清空数据</text>
						<text class="setting-desc">删除所有日程和设置</text>
					</view>
					<uni-icons type="trash" size="16" color="#EF4444" />
				</view>
			</view>
		</view> -->

		<!-- 关于 -->
		<view class="settings-section">
			<view class="section-header">
				<text class="section-title">关于</text>
			</view>
			<view class="settings-card">
				<view class="setting-item">
					<view class="setting-info">
						<text class="setting-label">应用版本</text>
						<text class="setting-desc">1.0.0</text>
					</view>
				</view>
				
				<view class="setting-item" @click="showAbout">
					<view class="setting-info">
						<text class="setting-label">使用说明</text>
						<text class="setting-desc">查看应用使用指南</text>
					</view>
					<uni-icons type="arrowright" size="16" color="#6B7280" />
				</view>
				
				<view class="setting-item" @click="resetSettings">
					<view class="setting-info">
						<text class="setting-label">重置设置</text>
						<text class="setting-desc">恢复所有设置为默认值</text>
					</view>
					<uni-icons type="refresh" size="16" color="#6B7280" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex'

export default {
	name: 'SettingsPage',
	
	computed: {
		...mapState('settings', ['notifications', 'defaults', 'data']),
		...mapGetters('settings', ['priorityOptions'])
	},
	
	onLoad() {
		this.loadSettings()
	},
	
	onShow() {
		// 更新自定义tabBar选中状态
		if (typeof this.getTabBar === 'function' && this.getTabBar()) {
			this.getTabBar().selected = 3
		}
	},
	
	methods: {
		...mapActions('settings', [
			'loadSettings', 
			'updateNotifications', 
			'updateDefaults',
			'resetSettings'
			// 'backupData', // 数据管理功能已隐藏
			// 'restoreData' // 数据管理功能已隐藏
		]),
		
		// 更新通知设置
		async updateNotification(key, value) {
			await this.updateNotifications({ [key]: value })
			// 如果是关键通知设置变化，更新日程提醒服务
			if (['enabled', 'scheduleReminderMinutes'].includes(key)) {
				await this.updateScheduleReminderSettings()
			}
		},
		
		// 更新数据设置
		async updateData(key, value) {
			this.$store.commit('settings/SET_DATA', { [key]: value })
			await this.$store.dispatch('settings/saveSettings')
		},
		
		// 显示优先级选择器
		showPrioritySelector() {
			const items = this.priorityOptions.map(option => option.label)
			const currentIndex = this.priorityOptions.findIndex(option => option.value === this.defaults.priority)
			
			uni.showActionSheet({
				itemList: items,
				success: async (res) => {
					const selectedPriority = this.priorityOptions[res.tapIndex].value
					await this.updateDefaults({ priority: selectedPriority })
				}
			})
		},
		
		// 显示日程提醒时间选择器
		showScheduleReminderSelector() {
			const items = ['15分钟前', '30分钟前', '1小时前', '2小时前', '1天前']
			const values = [15, 30, 60, 120, 1440]
			const currentValue = this.notifications.scheduleReminderMinutes || 30
			const currentIndex = values.indexOf(currentValue)
			
			uni.showActionSheet({
				itemList: items,
				success: async (res) => {
					const selectedTime = values[res.tapIndex]
					await this.updateNotification('scheduleReminderMinutes', selectedTime)
					// 更新日程提醒服务的设置
					await this.updateScheduleReminderSettings()
				}
			})
		},
		
		// 更新日程提醒服务设置
		async updateScheduleReminderSettings() {
			try {
				// 导入日程提醒服务
				const scheduleReminder = (await import('@/utils/scheduleReminder.js')).default
				const settings = {
					enabled: this.notifications.enabled,
					reminderMinutes: this.notifications.scheduleReminderMinutes || 30
				}
				scheduleReminder.saveReminderSettings(settings)
				console.log('已更新日程提醒设置')
			} catch (error) {
				console.error('更新日程提醒设置失败:', error)
			}
		},
		
		// 管理标签
		manageTags() {
			uni.showModal({
				title: '标签管理',
				content: '当前标签：' + this.defaults.tags.join('、'),
				showCancel: true,
				cancelText: '删除标签',
				confirmText: '添加标签',
				success: (res) => {
					if (res.confirm) {
						this.addTag()
					} else if (res.cancel) {
						this.removeTag()
					}
				}
			})
		},
		
		// 添加标签
		addTag() {
			uni.showModal({
				title: '添加标签',
				editable: true,
				placeholderText: '请输入标签名称',
				success: (res) => {
					if (res.confirm && res.content.trim()) {
						this.$store.commit('settings/ADD_TAG', res.content.trim())
						this.$store.dispatch('settings/saveSettings')
						uni.showToast({
							title: '添加成功',
							icon: 'success'
						})
					}
				}
			})
		},
		
		// 删除标签
		removeTag() {
			const items = this.defaults.tags
			if (items.length === 0) {
				uni.showToast({
					title: '没有可删除的标签',
					icon: 'none'
				})
				return
			}
			
			uni.showActionSheet({
				itemList: items,
				success: (res) => {
					const tagToRemove = items[res.tapIndex]
					this.$store.commit('settings/REMOVE_TAG', tagToRemove)
					this.$store.dispatch('settings/saveSettings')
					uni.showToast({
						title: '删除成功',
						icon: 'success'
					})
				}
			})
		},
		
		// 数据管理相关方法已隐藏
		/* 
		// 备份数据
		async backupData() {
			await this.backupData()
		},
		
		// 恢复数据
		async restoreData() {
			uni.showModal({
				title: '确认恢复',
				content: '恢复数据将覆盖当前所有日程，是否继续？',
				success: async (res) => {
					if (res.confirm) {
						await this.restoreData()
					}
				}
			})
		},
		
		// 清空所有数据
		clearAllData() {
			uni.showModal({
				title: '危险操作',
				content: '此操作将删除所有日程和设置，且无法恢复！',
				confirmColor: '#EF4444',
				success: (res) => {
					if (res.confirm) {
						// 清空日程数据
						this.$store.commit('schedule/SET_SCHEDULES', [])
						this.$store.dispatch('schedule/saveSchedules')
						
						// 重置设置
						this.resetSettings()
						
						uni.showToast({
							title: '数据已清空',
							icon: 'success'
						})
					}
				}
			})
		},
		*/
		
		// 显示关于信息
		showAbout() {
			uni.showModal({
				title: '我的日程 v1.0.0',
				content: '一个简洁高效的日程管理应用，帮助您更好地管理时间和任务。\n\n主要功能：\n• 智能优先级排序\n• 灵活的筛选和搜索\n• 日历视图\n• 数据统计分析\n• 本地数据存储',
				showCancel: false,
				confirmText: '知道了'
			})
		},
		
		// 重置所有设置
		resetSettings() {
			uni.showModal({
				title: '确认重置',
				content: '重置后所有设置将恢复为默认值，是否继续？',
				success: async (res) => {
					if (res.confirm) {
						await this.resetSettings()
						uni.showToast({
							title: '设置已重置',
							icon: 'success'
						})
					}
				}
			})
		},
		
		// 获取优先级文本
		getPriorityText(priority) {
			const map = {
				'low': '低',
				'medium': '中',
				'high': '高',
				'urgent': '紧急'
			}
			return map[priority] || '中'
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background-color: var(--bg-primary);
	padding: $spacing-lg;
	transition: background-color 0.3s ease;
}

.settings-section {
	margin-bottom: $spacing-xl;
}

.section-header {
	margin-bottom: $spacing-lg;
}

.section-title {
	font-size: $font-size-title-2;
	font-weight: $font-weight-semibold;
	color: var(--text-primary);
	transition: color 0.3s ease;
}

.settings-card {
	background-color: var(--bg-secondary);
	border-radius: $border-radius-md;
	overflow: hidden;
	box-shadow: 0 2px 4px 0 var(--shadow-color);
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.setting-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: $spacing-lg;
	border-bottom: 1px solid var(--border-color);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.3s ease;
	
	&:last-child {
		border-bottom: none;
	}
	
	&:active {
		background-color: var(--bg-primary);
	}
}

.setting-info {
	flex: 1;
	margin-right: $spacing-lg;
}

.setting-label {
	display: block;
	font-size: $font-size-body;
	font-weight: $font-weight-semibold;
	color: var(--text-primary);
	margin-bottom: $spacing-xs;
	transition: color 0.3s ease;
}

.setting-desc {
	font-size: $font-size-caption;
	color: var(--text-secondary);
	line-height: $line-height-caption;
	transition: color 0.3s ease;
}
</style> 